import React, { Component } from "react";
import { Form, Input, Table, Button, Divider,Row,Col,Select, DatePicker, Modal } from "antd";
import Content from "../../components/Content/Content";
const { Item } = Form;
const InputGroup = Input.Group;
const { Option } = Select;
function handleChange(value) {
  console.log(`selected ${value}`);
}
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '筛选菌株编号',
    dataIndex: 'sxjj_id',
  },
  {
    title: '样品编号',
    dataIndex: 'yp_id',
    width:190,
  },
  {
    title: '编号类型',
    dataIndex: 'scdyp_type',
    width:190,
    render: (text, record) => (
      <Select defaultValue={text}
      mode="tags"
      style={{ width: "100%" }}
      onChange={(value) => this.setState({scdyp_type: value[0]})}
      tokenSeparators={[","]}
      showArrow={true}
    >
        <Option value="f_fjypid">发酵样品编号</Option>
        <Option value="lf_id">流份编号</Option>
        <Option value="ctp_id">粗提品编号</Option>
        <Option value="hhw_id">化合物编号</Option>
      </Select>
    )
  },
  {
    title: '筛选样品复筛检测值',
    dataIndex: 'sc_jcz',
  },
  {
    title: '复筛空白对照',
    dataIndex: 'sc_kbdz',
    editable: true,
  },
  {
    title: '复筛阳性对照',
    dataIndex: 'sc_yxdz',
    editable: true,
  },
  {
    title: '复筛阴性对照',
    dataIndex: 'sc_yydz',
    editable: true,
  },
  {
    title: '复筛样品活性',
    dataIndex: 'sc_yphx',
    editable: true,
  },
  {
    title: '复筛结果录入时间',
    dataIndex: 'sc_time',
    
  },
  {
    title: '复筛阳性判定值',
    dataIndex: 'sc_pdz',
  },
  {
    title: '复筛结果',
    dataIndex: 'sc_jg',
  },
];

const data = [];
for (let i = 0; i < 3; i++) {
  data.push({
    key: i,
    strain_number: `ACCC000${i}`,
    other_numberme: 666666666,
    generic_name: `属名 ${i}`,
    words: `种加词 ${i}`,
    strain_name: `学名 ${i}`,
    popular_name: `俗名 ${i}`,
    habitat: `成分 ${i}`,
    potential_use: `用途 ${i}`,
    operate: `London, Park Lane no. ${i}`
  });
}

class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
    filteredInfo: null,
    sortedInfo: null,

    dataSource: data, 
    count: 1,

    asdyp_type:'', // 样品编号类型

    viewData: {},
    newData: {},

    searchParams : {},
  };

  loadData = (current = 1) => {

    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
    
    const url = global.api.secondarycreeningDecide
    + "?scdyp_type=" + (this.state.searchParams.scdyp_type || "")
    + "&sc_time=" + (this.state.searchParams.sc_time  || "")
    + "&sxjj_id=" + (this.state.searchParams.sxjj_id || "")
    + "&m_name=" + (this.state.searchParams.m_name || "")
    + "&m_id=" + (this.state.searchParams.m_id || "")
    + "&yp_id=" + (this.state.searchParams.yp_id || "");
    
    return global.getdata.get(url, {page_index: current, page_size: this.state.pageSize, search:{}})
    .then(res => {
      this.setState({dataSource: res.results, count: res.count, newData: {}})
    })
    .catch(err => {
      Modal.error({
        content: '数据加载失败！'
      })
    }) 

  }

  componentDidMount() {
    this.loadData(1);
  } 

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;
    const { getFieldDecorator } = this.props.form;
    const formItemLayoutt = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };
    return (
      <div>
        <div className="filtrate">
        <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              
                <Item label="筛选方法编号" >
                  <Input defaultValue={this.state.newData.sxjj_id }  onChange={(e) => this.loadDataById(e)} />
                </Item>
                <Item label="筛选方法名称" >
                      <Input defaultValue={this.state.newData.m_name } onChange={e => this.state.newData.m_name  = e.target.value } />
                </Item>
                <Item label="录入时间" >
                      <DatePicker
                        onChange={(value, dateString) => this.state.newData.as_time  = dateString}
                        style={{ width: "100%" }}
                      />     
                </Item>                
                
                <Item label="样品编号">
                <Input style={{ width: "60%" }} defaultValue={this.state.newData.yp_id } onChange={e => this.state.newData.yp_id  = e.target.value } />
                <InputGroup compact style={{ width: "40%" }}>
                  <Select
                    // mode="tags"
                    style={{ width: "100%" }}
                    onChange={value => this.state.newData.scdyp_type  = value[0]}
                    tokenSeparators={[","]}
                    showArrow={true}
                  >
                    <Option value="f_fjypid">发酵样品编号</Option>
                    <Option value="lf_id">流份编号</Option>
                    <Option value="ctp_id">粗提品编号</Option>
                    <Option value="hhw_id">化合物编号</Option>
                  </Select>
                </InputGroup>
                </Item>     

                <Item wrapperCol={{ span: 5, offset:7 }}>
               <Row guuter={16}>
            <Col span={5}>
            <Button type="primary" htmlType="submit" onClick={()=>this.loadData(1)} loading={this.state.loading}>
                查询
              </Button>
            </Col>
          </Row>
        </Item>
            </Form>
        </div>
        <div style={{marginTop: 20,}}>
        <span style={{ marginLeft: 20 ,}}>
            <b>{hasSelected ? `选中 ${selectedRowKeys.length} 条` : ''}</b>
          </span>
          </div>
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data}
          bordered
          style={{ marginLeft: 12,marginTop: 20, }}
        />
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class ActivityScreeningAnalysisData extends Component { 
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default ActivityScreeningAnalysisData;
